<template>
  <el-dialog :title="!dataForm.id ? '消息新增' : '消息修改'" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form size="medium" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="发送类型" prop="sendType">
        <el-radio-group v-model="dataForm.sendType">
          <el-radio :label="1">图文形式</el-radio>
          <el-radio :label="2">消息形式</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发送方式" prop="sendMethod">
        <el-radio-group v-model="dataForm.sendMethod">
          <el-radio :label="1">立即发送</el-radio>
          <el-radio :label="2">定时发送</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="公众号原始ID" prop="wxAccount">
        <el-select v-model="dataForm.wxAccount" placeholder="请选择">
          <el-option v-for="item in wxAccountOptions" :key="item.account" :label="item.name" :value="item.account"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发送对象" prop="sendObject">
        <el-radio-group v-model="dataForm.sendObject">
          <el-radio :label="1">所有人</el-radio>
          <el-radio :label="2">指定对象</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发送对象" prop="fanIds" v-if="dataForm.sendObject == 2">
        <el-input v-model="dataForm.fanIds" placeholder="发送对象" style="width: 240px;">
          <el-button slot="append" @click="fansCheckHandle">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="发送图文" prop="sendName" v-if="dataForm.sendType == 1">
        <el-input v-model="dataForm.sendName" placeholder="发送图文" style="width: 240px;">
          <el-button slot="append" @click="materialCheckHandle">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="发送消息" prop="sendName" v-if="dataForm.sendType == 2">
        <el-input v-model="dataForm.sendName" placeholder="发送消息" style="width: 240px;">
          <el-button slot="append" @click="messageCheckHandle">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="发送状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <search-fans v-if="fansVisible" ref="fansDialog" @refreshForm="getFansData"></search-fans>
    <search-material v-if="materialVisible" ref="materialDialog" @refreshData="getMaterialData"></search-material>
    <search-article v-if="articleVisible" ref="articleDialog" @refreshData="getArticleData"></search-article>
  </el-dialog>
</template>

<script>
  import { fetchAccountList } from '@/api/mp/wxaccount'
  import {
    getWxMessageSendObj,
    addWxMessageSendObj,
    putWxMessageSendObj
  } from '@/api/mp/wxmessagesend'

  import SearchFans from './components/CheckFans'

  import SearchMaterial from '@/views/mp/_components/SearchMaterial'
  import SearchArticle from '@/views/mp/_components/SearchArticle'


  export default {
    data() {
      return {
        visible: false,
        fansVisible: false,
        materialVisible: false,
        articleVisible: false,
        wxAccountOptions: [],
        dataForm: {
          id: 0,
          sendType: 1,
          sendMethod: 1,
          wxAccount: '',
          sendObject: 1,
          sendName: '',
          sendInfo: '',
          fanIds: [],
          status: 0,
        },
        dataRule: {
          sendType: [{
            required: true,
            message: '发送类型(1-图文形式,2-消息形式)不能为空',
            trigger: 'blur'
          }],
          sendMethod: [{
            required: true,
            message: '发送方式(1-立即发送,2-定时发送)不能为空',
            trigger: 'blur'
          }],
          wxAccount: [{
            required: true,
            message: '公众号原始ID不能为空',
            trigger: 'blur'
          }],
          sendObject: [{
            required: true,
            message: '发送对象(1-所有人,2-指定对象)不能为空',
            trigger: 'blur'
          }],
          sendInfo: [{
            required: true,
            message: '发送图文id/发送消息id不能为空',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '状态(1-启用,0-停用)不能为空',
            trigger: 'blur'
          }]

        }
      }
    },
    components: {
      SearchFans,
      SearchMaterial,
      SearchArticle
    },
    created() {
      this.getAccountList()
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getWxMessageSendObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              putWxMessageSendObj(this.dataForm).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              });
            } else {
              addWxMessageSendObj(this.dataForm).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      },
      // 打开选择粉丝弹窗
      fansCheckHandle() {
        this.fansVisible = true
        this.$nextTick(() => {
          this.$refs.fansDialog.init()
        })
      },
      // 打开选择图文弹窗
      materialCheckHandle(){
        this.materialVisible = true
        this.$nextTick(() => {
          this.$refs.materialDialog.init()
        })
			},
      // 打开选择消息弹窗
      messageCheckHandle(){
        this.articleVisible = true
        this.$nextTick(() => {
          this.$refs.articleDialog.init()
        })
			},
      // 获取素材信息
      getMaterialData(data){
        this.$set(this.dataForm,'sendName',data.messageTheme)
        this.$set(this.dataForm,'sendInfo',data.id)
      },
      // 获取消息信息
      getArticleData(data){
        this.$set(this.dataForm,'sendName',data.title)
        this.$set(this.dataForm,'sendInfo',data.id)
      },
      // 获取公众号信息
      getAccountList() {
        fetchAccountList().then(result => {
          this.wxAccountOptions = result.data.data
        })
      }
    }
  }
</script>
